<template>
	<view class="">
		<view class="head col_sp_be" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<view class="user sp_be" @click="tonavigateTo('./setUp')" style="margin-top: 47rpx;">
				<view class="user_text start">
					<image class="user_img spacing20" :src="userinfo.headImg" mode=""></image>
					<view class="col_sp_be" style="justify-content: center;">
						<text class="fo38_w500">{{ login ? (userinfo.phone ) : '请登录' }}</text>
						<text class="fo24_w500">姓名：{{ userinfo.realname ? (userinfo.realname ) : '未认证' }} - 所在机构: {{userinfo.fatherName}}</text>
					</view>
				</view>
				<image class="user_rghit" src="/static/imgs/my_slices/11.png" mode=""></image>
			</view>
		</view>
		<view class="bg_EE515A flex align-center justify-between" style="padding: 40rpx 40rpx 40rpx 47rpx;">
			<view>
				<view class="flex align-center margin-bottom-sm">
					<text class="text-white text-df margin-right-xs" style="opacity: 0.7;">总金额(元)</text>
                    <image @click="changeImg()"  v-if="!showUpImg" src="/static/images/icon/look.png" mode="widthFix" style="width: 50rpx;"></image>
					<image @click="changeImg(login ? parseFloat(user.buyMoney + user.keYongMoney).toFixed(2) : '0.00')"  v-if="showUpImg" src="/static/images/icon/eye2.png" mode="widthFix" style="width: 50rpx;"></image>         
                    
                </view>
				<text class="text-white text-bold text-xxxl ">{{total_money}}</text>
			</view>
			<view class="flex">
				<button class="cu-btn line-grey margin-right-sm" @click="cash()">转出</button>
				<button class="cu-btn line-grey" @click="recharge()">转入</button>
			</view>
		</view>
		<view class="">
			<!-- 半圆 -->
			<view class="semicircle">
			</view>
			<view class="banner-4" @click="goChiCang">
				<image src="/static/images/banner_4.png" mode="widthFix" class="img"></image>
			</view>
		</view>
		<view class="bg_EE515A padding-lr-xs padding-tb flex justify-center align-center" style="display: none;">
			<view class="border-right-1B202C padding-lr-lg">
				<view class="text-white opacity0_7 text-df">持有收益(元)</view>
				<view class="color_E63535 text-lg text-bold margin-top-sm">
					<p v-if="data.totalProfitAndLoss>=0" style="color: #E23232;font-weight:bold;">{{parseFloat(data.totalProfitAndLoss).toFixed(2)}}</p>
					<p v-if="data.totalProfitAndLoss<0" style="color: #3ca509;font-weight:bold;">{{parseFloat(data.totalProfitAndLoss).toFixed(2)}}</p>
				</view>
			</view>
			<view class="border-right-1B202C padding-lr-lg">
				<view class="text-white opacity0_7 text-df">冻结资金(元)</view>
				<view class="text-white text-lg text-bold margin-top-sm">{{parseFloat(user.djmoney).toFixed(2)}}</view>
			</view>
			<view class="padding-lr-lg">
				<view class="text-white opacity0_7 text-df">可用资金(元)</view>
				<view class="text-white text-lg text-bold margin-top-sm">{{parseFloat(user.keYongMoney).toFixed(2)}}</view>
			</view>
		</view>
		<view class="margin-top-sm" style="overflow: hidden;">
			<view class="text-df text-black padding-tb-sm padding-left-sm border-bottom-1B202C" style="display: none;">常用功能</view>
			<view class="flex flex-wrap flex-ver function margin-top">
<!-- 				<view class="text-center text-black item" @click="toTrade">
					<image src="/static/images/icon/hushenzhishu.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">买入股票</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view> -->
				<view class="text-center text-black item" @click="tonavigateTo('moneyRecord')">
					<image src="/static/images/icon/money.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">资金记录</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view>
				<view class="text-center text-black item" @click="tonavigateTo('tradingRecord')">
					<image src="/static/images/icon/jiaoyijilv.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">交易记录</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view>
<!-- 				<view class="text-center text-black item" @click="tonavigateTo('recharge')">
					<image src="/static/images/icon/zijinzhuanchu.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">银证转账</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view> -->
				<view class="text-center text-black item" @click="tonavigateTo('myShare')">
					<image src="/static/images/icon/addgp.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">我的申购</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view>
				<view class="text-center text-black item" @click="tonavigateTo('realname')">
					<image src="/static/images/icon/shiming.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">实名认证</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view>
				<view class="text-center text-black item" @click="tonavigateTo('setUp')">
					<image src="/static/images/icon/shichangyaowen.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">账号设置</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view>
                <view class="text-center text-black item" @click="tonavigateTo('strategy')">
                	<image src="/static/images/icon/addgp.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">最新策略</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
				<view class="text-center text-black item" @tap="customer">
					<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
					<view class="flex-f1 text-left">在线客服</view>
					<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
				</view>
                
                <!-- <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/zhuiZhang')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">机构抢筹</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/HotList')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">热门榜单</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/mainforce')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">主力排行</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/moneyFlow')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">资金流向</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/turnover')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">换手率</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/datl')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">龙虎榜</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/bxzj')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">北向资金</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/shareswin')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">新股申购与中签日期</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view>
                
                <view class="text-center text-black item"  @click="tonavigateTo('/pages/OtherPages/economicdata')">
                	<image src="/static/images/icon/service.png" mode="widthFix" class=""></image>
                	<view class="flex-f1 text-left">中国经济数据</view>
                	<image src="/static/images/icon/right_black.png" mode="widthFix" class=""></image>
                </view> -->
			</view>
			
		</view>
		<view class="padding-lr flex flex-direction" @click="loginout()" v-if="login">
			<button class="cu-btn bg-red lg">退出登录</button>
		</view>
		
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度 
				login: false,
				avatarUrl: '/static/img/logo.png',
				userinfo: {},
				user: {}, // 用户信息
				data: {}, // 股票收益信息 统计信息 主要包含
				id: 0,
				code: "",
				ischeck:"",
				qqserver:"",
                showUpImg:true,
                'total_money':'*******',
			};
		},
		methods:{
            changeImg:function(e){
                this.showUpImg = !this.showUpImg
                if(!this.showUpImg){
                    this.total_money = e; 
                }else{
                    this.total_money = '*******';
                }
             },
			// 去持仓
			goChiCang(){
				uni.switchTab({
					url:'/pages/position/position'
				})
			},
			// 去交易
			toTrade(){
				uni.navigateTo({
					url: '/pages/trading/buy'
				})
			},
			// 跳转页面
			tonavigateTo(url){
				uni.navigateTo({
					url:url
				})
			},
			//转入
			recharge: function() {
				uni.navigateTo({
					url: "/pages/member/recharge",
				});
			},
			//转出
			cash: function() {
				uni.navigateTo({
					url: "/pages/member/cash",
				});
			},
			//客服中心
			customer: function() {
				if(this.qqserver){
					//#ifdef H5
					window.location.href=this.qqserver;
					//#endif
					//#ifndef H5
					plus.runtime.openURL(this.qqserver);
					//#endif
				}
			},
			...mapMutations(['logout']),
			goLogin() {
				if (!this.login) {
					this.navigateTo('1', true);
				}
			},
			navigateTo(url, hasLogin) {
				if (hasLogin && !this.login) {
					uni.navigateTo({
						url: './login'
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			// 新增功能
			userInfo: function() {
					this.$Request.get(this.$api.index.userInfo).then(res => {
						this.login = true;
						this.userinfo = [];
						this.userinfo.phone = res.data.phone
						this.userinfo.money = res.data.money
						this.userinfo.djmoney = res.data.djmoney
						this.userinfo.realname = res.data.realname
						this.userinfo.invitecode = res.data.invitecode
						this.userinfo.fatherName = res.data.fatherName
						this.id = res.data.id;
						this.code = res.data.invitecode;
						this.ischeck = res.data.ischeck;
						this.qqserver = res.qqserver;
						this.userinfo.headImg = '/static/images/headImg/'+ (res.data.card_pic ? res.data.card_pic : 1)+'.png'
					})
			},
			getUser: function() {
				this.$Request.post(this.$api.index.getUser).then(res => {
					this.user = res.data;
				})
				this.$Request.post(this.$api.index.getOrders).then(res => {
					this.data = res;
				})
			},
			loginout() {
				uni.showModal({
					title: "提示信息",
					content: "您确定退出当前帐号吗？",
					success: (r) => {
						if (r.confirm) {
							this.$Request.get(this.$api.index.logOut).then(res => {
								if (res.code == 0) {
									this.$SysCache.put("keep_phone_flag",undefined);
									this.$SysCache.put("Authorization_token",undefined);
									
									uni.navigateTo({
										url: '/pages/public/login/login'
									});
								}
							})
						} else if (r.cancel) {
							uni.navigateTo({
								url: '/'
							});
						}
					}
				})
			},
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					}
					else if(res.code == 0){
						this.$Request.get(this.$api.index.userInfo).then(res => {
							if(res.data.ischeck == 1){
								uni.showModal({
									content: "实名认证，机构正在审核中",
									confirmText: "确定",
									cancelText: "取消"
								})
							}else if(res.data.ischeck == 0){
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "温馨提示：根据反洗钱规定，您需要完成实名认证才可以继续操作。",
									confirmText: "去认证",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/member/realname?flag="+ischeck,
											})
										} else if (res.cancel) {
											 
										}
									}
								})
							}else if(res.data.ischeck == 3){
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "实名认证未通过审核，请重新提交",
									confirmText: "确定",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
										  uni.navigateTo({
										  	url: "/pages/member/realname?flag="+ischeck,
										  })
										} else if (res.cancel) {
										 
										}
									}
								})
							}
						})
					}
					else {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					}
				})
			}
		},
		onShow: function() {
			this.checkLogin()
			this.userInfo()
			this.getUser()
		}
	}
</script>

<style lang="scss" scoped>
	@import "./member.scss";
	.cu-btn{
		color: #FFFFFF;
		border-color: #FFFFFF !important;
		padding: 0 30rpx;
	}
	.border-bottom-1B202C{
		border-bottom-color: #C7C7CB;
	}
	.border-right-1B202C{

		border-bottom-color: #C7C7CB;
	}
	.semicircle{
		z-index: -1;
		margin-top: -15rpx;
		width: 100vw;
		height: 30rpx;
		background-color: #EE515A;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}
	.banner-4{
		justify-content: center;
		padding: 0 30rpx;
		margin-top: -40rpx;
		.img{
			box-shadow: 0 -6px 4px rgba(0,0,0,0.2);
			overflow: hidden;
			border-radius: 20rpx;
			width: 691rpx;
			height: 230rpx !important;
		}
	}
	.option{
		font-size: 30rpx;
		.img{
			width: 50rpx;
		}
	}
	.function{
		
		.item{
			display:flex;
			position: relative;
			// border-bottom: 1px solid red;
			align-items: center;
			padding: 24rpx 35rpx;
			padding-right: 5rpx;
			image{
				width: 50rpx;
				margin-right: 10rpx;
			}
			&::after{
				position: absolute;
				content: '';
				width: 100vw;
				height: 1rpx;
				background-color: #C7C7CB;
				bottom: 0;
				left: 40rpx;
			}
			&:nth-last-of-type(1) {
				&::after{
					height: 0 !important;
				}
			}
		}
		
	}
</style>
